<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<head th:include="include :: header"></head>
<link th:href="@{/css/main/layui.css}" rel="stylesheet" />
<script th:src="@{/ajax/libs/layui/lay/modules/element.js}"></script>
<body class="gray-bg">
<input type="hidden" id="taskId" th:value="*{taskId}"/>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">杆塔</li>
        <li>表箱</li>
        <li>电缆井</li>
        <li>配电材料</li>
        <li>配电设备</li>
        <li>同杆架设</li>
        <li>拉线</li>
        <li>照片</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <!--<form id="form1" action="" target="frame1" method="post"></form>-->
            <iframe src="#" name="frame1" id="frame1" width="100%" height="400px" frameborder="0"></iframe>
        </div>
        <div class="layui-tab-item">
            <iframe src="#" name="frame2" id="frame2" width="100%" height="400px" frameborder="0"></iframe>
        </div>
        <div class="layui-tab-item">
            <iframe src="#" name="frame3" id="frame3" width="100%" height="400px" frameborder="0"></iframe>
        </div>
        <div class="layui-tab-item">
            <iframe src="#" name="frame4" id="frame4" width="100%" height="400px" frameborder="0"></iframe>
        </div>
        <div class="layui-tab-item">
            <iframe src="#" name="frame5" id="frame5" width="100%" height="400px" frameborder="0"></iframe>
        </div>
        <div class="layui-tab-item">
            <iframe src="#" name="frame6" id="frame6" width="100%" height="400px" frameborder="0"></iframe>
        </div>
        <div class="layui-tab-item">
            <iframe src="#" name="frame7" id="frame7" width="100%" height="400px" frameborder="0"></iframe>
        </div>
        <div class="layui-tab-item">
            <iframe src="#" name="frame8" id="frame8" width="100%" height="400px" frameborder="0"></iframe>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    $(function () {
        //	选中li时设置样式
        $("ul li").click(function() {
            $(this).siblings('li').removeClass('layui-this');
            $(this).addClass('layui-this');
        });

        var taskId = $("#taskId").val();

        //  点位
        $("#frame1").attr("src",ctx+"assets/pPole/task_pPole/"+taskId);
        //  表箱
        $("#frame2").attr("src",ctx+"assets/pBoxes/task_pBoxes/"+taskId);
        //  电缆井
        $("#frame3").attr("src",ctx+"assets/pCablePit/task_pCablePit/"+taskId);
        //  材料
        $("#frame4").attr("src",ctx+"assets/pMaterial/task_pMaterial/"+taskId);
        //  设备
        $("#frame5").attr("src",ctx+"assets/pDevice/task_pDevice/"+taskId);
        //  同杆架设
        $("#frame6").attr("src",ctx+"assets/pJointPole/task_pJointPole/"+taskId);
        //  拉线
        $("#frame7").attr("src",ctx+"assets/pPullLine/task_pPullLine/"+taskId);
        //  照片
        $("#frame8").attr("src",ctx+"assets/pPicture/task_pPicture/"+taskId);

    });


    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0) //用于演示
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            ,tabDelete: function(othis){
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });

    });

</script>
</body>
</html>